<template>
    <div class="login-container">
        <h1 class="title">公司旅人</h1>
        <el-form :model="form" label-width="100px" @submit.prevent>
            <!-- 职位选择框 -->
            <el-form-item label="职位">
                <el-select v-model="form.position" placeholder="请选择职位">
                    <el-option label="经理" value="经理" />
                    <el-option label="财务人员" value="财务人员" />
                    <el-option label="员工" value="员工" />
                </el-select>
            </el-form-item>

            <!-- 工号输入框 -->
            <el-form-item label="工号">
                <el-input v-model="form.userId" placeholder="请输入工号" />
            </el-form-item>

            <!-- 密码输入框 -->
            <el-form-item label="密码">
                <el-input
                    v-model="form.password"
                    type="password"
                    placeholder="请输入密码"
                    show-password
                />
            </el-form-item>

            <!-- 验证码 -->
            <el-form-item prop="checkcode" label="验证码">
                <div class="check-code-panel">
                    <el-input
                        size="large"
                        clearable
                        placeholder="请输入验证码"
                        v-model.trim="form.checkCode"
                        @focus="clearVarify"
                    >
                        <template #prefix>
                            <span class="iconfont icon-checkcode"></span>
                        </template>
                    </el-input>
                    <img
                        :src="checkCodeUrl"
                        alt="checkCode"
                        class="check-code"
                        @click="changeCheckCode"
                    />
                </div>
                <div class="check-code-tip">
                    <p>
                        看不清？<a href="javascript:;" @click="changeCheckCode"
                            >点击图片或此处换一张</a
                        >
                    </p>
                </div>
            </el-form-item>

            <!-- 登录按钮 -->
            <el-form-item>
                <el-button type="primary" @click="handleLogin">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { useUserStore } from "@/store/User";
import router from "@/router";
import md5 from 'js-md5'; // 引入 md5 库

const { proxy } = getCurrentInstance();

const userStore = useUserStore();

const form = ref({
    position: "",
    userId: "",
    password: "",
    checkCode: "",
});

const handleLogin = async () => {
    if (!form.value.position || !form.value.userId || !form.value.password) {
        return proxy.Message.error("请填写完整信息");
    }

    if (!form.value.checkCode) {
        return proxy.Message.error("请填写验证码");
    }

    if (
        form.value.checkCode.toUpperCase() !==
        localStorage.getItem("checkCode").toUpperCase()
    ) {
        return proxy.Message.error("验证码错误");
    }
// // 对密码进行 MD5 加密
//   form.value.password = md5(form.value.password);

    let result = await proxy.Request({
        url: proxy.Api.login,
        showLoading: true,
        params: {
            position: form.value.position,
            userId: form.value.userId,
            password: form.value.password,
        },
    });

    if (!result) {
        return proxy.Message.error("登录失败");
    }

    userStore.setUser(result.data);

    proxy.Message.success("登录成功");
    router.push("/Main");
};

// 获取验证码;
const checkCodeUrl = ref(null);
const changeCheckCode = async () => {
    let result = await proxy.Request({
        url: proxy.Api.checkCode,
    });
    if (!result) {
        return;
    }
    checkCodeUrl.value = result.data.checkCodeImg;
    // console.log(checkCodeUrl)
    localStorage.setItem("checkCode", result.data.checkCode);
};
changeCheckCode();
</script>

<style lang="less" scoped>
.login-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30vw;
    padding: 20px;
    box-sizing: border-box;
}

.el-form {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.el-form-item__label {
    font-weight: bold;
    color: #333;
}

.el-input__inner {
    border-radius: 6px;
    border-color: #dcdfe6;
    transition: border-color 0.3s;
}

.el-input__inner:focus {
    border-color: #409eff;
    box-shadow: 0 0 5px rgba(64, 158, 255, 0.3);
}

.el-select {
    width: 100%;
}

.el-select .el-input {
    border-radius: 6px;
}

.el-button {
    width: 100%;
    height: 40px;
    background-color: #409eff;
    border-color: #409eff;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
}

.el-button:hover {
    background-color: #66b1ff;
    transform: scale(1.02);
}

/* 表单布局调整 */
.el-form-item {
    margin-bottom: 20px;
}

.el-form-item:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .el-form {
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .el-button {
        font-size: 14px;
        height: 36px;
    }
}

.check-code-panel {
    display: flex;
    .check-code {
        cursor: pointer;
        width: 120px;
        margin-left: 5px;
    }
}

.check-code-tip {
    color: #999;
    font-size: 12px;
    margin-left: 50%;
    text-align: right;
}

.title {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}
</style>
